<template>
    <el-dialog
            :title="isEdit ? '编辑': '添加'"
            :visible.sync="addArticleVisible"
            width="53%"
            :append-to-body='true'

            :before-close="closeAddEditArticle">
        <el-form ref="form" :model="form" label-width="80px">
            <div class="select clearfix">
                <el-form-item label="文章标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="文章类别">
                    <el-select v-model="form.kind" size="mini" placeholder="类型">
                        <el-option
                                v-for="item in this.articleKindList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章详情">
                    <Editor :content="form.content" @change="editorChange" ref="editor"></Editor>
                </el-form-item>

            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="closeAddEditArticle">取 消</el-button>
    <el-button type="primary" @click="addSubmit">确 定</el-button>
  </span>
    </el-dialog>
</template>

<script>
    import config from "../../../config/index"
    import {articleKindList} from "../../../data";
    import Editor from "../../../components/admin/editor/edotir";

    import {addArticle, reviseArticle} from "../../../api";

    export default {
        name: "add-edit-Article",
        data() {
            return {
                articleKindList: articleKindList,
                form: {
                    adminId: "",
                    title: "",
                    kind: "",
                    content: "",
                },
            }
        },
        components: {
            Editor
        },
        mounted() {
            let adminUserInfo = JSON.parse(config.getCache("adminUserInfo"));
            this.form.adminId = adminUserInfo.id;

        },
        props: {
            addArticleVisible: Boolean,
            isEdit: Boolean,
        },
        methods: {
            closeAddEditArticle() {
                this.$emit("closeAddEditArticle", false);
                this.clearForm();
            },
            editorChange(data) {
                this.form.content = data
            },
            //提交
            addSubmit() {
                // eslint-disable-next-line no-console
                console.log(this.form, "this.form");
                for (let index in this.form) {
                    if (this.form[index] === "") {
                        this.$message({
                            message: "请填写完整信息",
                            type: "warning"
                        });
                        return
                    }
                }
                !this.isEdit ? addArticle(this.form).then(res => {
                    if (res.code === 200) {
                        this.clearForm();
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        });
                        this.closeAddEditArticle()
                    } else {
                        // this.clearForm();
                        this.$message({
                            message: res.data,
                            type: "warning"
                        })
                    }
                }) : reviseArticle(this.form).then(res=>{
                    if (res.code === 200) {
                        this.clearForm();
                        this.$message({
                            message: "修改成功",
                            type: "success"
                        });
                        this.closeAddEditArticle()
                    } else {
                        // this.clearForm();
                        this.$message({
                            message: res.data,
                            type: "warning"
                        })
                    }
                })
            },
            //发布成功与否，清除表单
            clearForm() {
                // let {adminId, title, intro, images, kind, size, quick, texture, system, integral, count} = this.form;
                this.form.title = '';
                this.form.kind = '';
                this.form.content = '';
                this.$refs.editor.editor.txt.clear();
                // eslint-disable-next-line no-console
                console.log(this.$refs.editor, "this.$refs.editor.html= ''")
            }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">

</style>
